<template>
  <div class="index2">
    <div class="one">
      <router-link :to="{name: 'cailiao-base', query: {compoent: 'cailiao1'}}">
        <img src="~@/assets/robot/2/taikongsha.png">
      </router-link>
    </div>
    <div class="two">
      <router-link :to="{name: 'cailiao-base', query: {compoent: 'cailiao2'}}">
        <img src="~@/assets/robot/2/zhika.png">
      </router-link>
    </div>
    <div class="three">
      <router-link :to="{name: 'cailiao-base', query: {compoent: 'cailiao3'}}">
        <img src="~@/assets/robot/2/dakeli.png">
      </router-link>
    </div>
    <div class="four">
      <router-link :to="{name: 'cailiao-base', query: {compoent: 'cailiao4'}}">
        <img src="~@/assets/robot/2/zhizhantu.png">
      </router-link>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'index2',
    data () {
      return {
      }
    }
  }
</script>

<style scoped>
.index2 > div {
  position: absolute; 
}
.one{
    top:230px;
    left:200px;
}
.two{
    top:235px;
    left:440px;
}
.three{
    top:238px;
    left:680px;
}
.four{
    top:243px;
    left:920px;
}
</style>
